﻿<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>登录</title>
    <link rel="stylesheet" media="screen" href="/css/style.css">
    <link rel="stylesheet" type="text/css" href="/css/reset.css" />
    <link href="/layer/theme/default/layer.css" rel="stylesheet" />
    <script src="/lib/jquery/dist/jquery.min.js"></script>
    <script src="/layer/layer.js"></script>
</head>
<body>
    <div id="particles-js">
        <div class="login">
            <div class="login-top">
                登录
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="/img/name.png" /></div>
                <div class="login-center-input">
                    <input type="text" name="uname" id="uname" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'" />
                    <div class="login-center-input-text">用户名</div>
                </div>
            </div>
            <div class="login-center clearfix">
                <div class="login-center-img"><img src="/img/password.png" /></div>
                <div class="login-center-input">
                    <input type="password" name="upwd" id="upwd" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'" />
                    <div class="login-center-input-text">密码</div>
                </div>
            </div>
            <div class="login-button">
                登录
            </div>
        </div>
        <div class="sk-rotating-plane"></div>
    </div>

    <!-- scripts -->
    <script src="/js/particles.min.js"></script>
    <script src="/js/app.js"></script>
    <script type="text/javascript">
        function hasClass(elem, cls) {
            cls = cls || '';
            if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
            return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
        }

        function addClass(ele, cls) {
            if (!hasClass(ele, cls)) {
                ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
            }
        }

        function removeClass(ele, cls) {
            if (hasClass(ele, cls)) {
                var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
                while (newClass.indexOf(' ' + cls + ' ') >= 0) {
                    newClass = newClass.replace(' ' + cls + ' ', ' ');
                }
                ele.className = newClass.replace(/^\s+|\s+$/g, '');
            }
        }
        document.querySelector(".login-button").onclick = function () {
            var uname = $("#uname").val();
            if (uname == null || uname == "") {
                layer.msg('请输入用户名！');
                return false;
            }
            var upwd = $("#upwd").val();
            if (upwd == null || upwd == "") {
                layer.msg('请输入用户密码！');
                return false;
            }
            addClass(document.querySelector(".login"), "active")
            setTimeout(function () {
                addClass(document.querySelector(".sk-rotating-plane"), "active")
                document.querySelector(".login").style.display = "none"
            }, 800)
            $.getJSON("/Admin/LoginDo", { uname: uname, upwd: upwd }, function (result) {
                if (result.status == 1) {
                    setTimeout(function () {
                        removeClass(document.querySelector(".login"), "active")
                        removeClass(document.querySelector(".sk-rotating-plane"), "active")
                        document.querySelector(".login").style.display = "block"
                        layer.msg('登录成功', { icon: 6 },function () {
                            window.location.href = "/Home/Index";
                        });                      

                    }, 3000)
                }
                else {
                    layer.msg('登录失败，联系高级管理员', { icon: 5 });
                }
            });
        }
    </script>
</body>
</html>
